<template>
    <div class="home">
        <!-- banner -->
        <div class="banner">
            <div class="title">饿了么</div>
            <!-- 输入框 -->
            <InputBox />
        </div>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in swiper" :key="index">
                <!-- 注意：src前加： -->
                <img :src="item.bannerUrl" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 店铺列表 -->
        <div class="list">
            <div class="title">猜你喜欢</div>
            <div class="sort">
                <span :style="{ fontWeight: currentIndex == index ? 'bold' : '' }" v-for="(item, index) in sort"
                    :key="index" @click="handleClick(index)">{{ item }}</span>
            </div>
            <div class="shoplist">
                <div class="shoplist">
                    <div @click="toDetail(item)" class="shop" v-for="(item, index) in shoplist" :key="index">
                        <div class="imgbox">
                            <img :src="item.picUrl" alt="">
                        </div>
                        <div class="text">
                            <div class="name">{{ item.name }}</div>
                            <div class="sale"> <span>☆ {{ item.wmPoiScore / 10 }}</span> 
                            <span>{{ item.monthSalesTip }}</span></div>
                            <div class="desc">{{ item.minPriceTip }} {{ item.shippingFeeTip }}
                                <span>{{item.deliveryTimeTip}}{{item.distance}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import InputBox from '../../components/InputBox.vue';
import { shop_list,banner_list } from '../../utils/api'
export default {
    components: {
        InputBox
    },
    data() {
        return {
            currentIndex: 0,
            swiper:[],
            sort: ['综合排序', '距离最近', '销量最高', '筛选'],
            shoplist: []

        }
    },
    methods: {
        handleClick(index) {
            this.currentIndex = index;
            if(index==1){
                this.shoplist.sort((a,b)=>{
                    return parseInt(a.distance)-parseInt(b.distance)
                })
            }
            else if(index==2){
                this.shoplist.sort((a,b)=>{
                    return b.wmPoiScore - a.wmPoiScore;
                })
            }
        },
        toDetail(item) {
            this.$router.push('/detail/'+ item.mtWmPoiId);
         }
    },
    mounted(){
        shop_list().then((res)=>{
            this.shoplist = res.data.list
        }),
        banner_list().then((res)=>{
            this.swiper = res.data.list
        })
    }
}
</script>

<style lang="scss" scoped>
// banner
.banner {
    height: 110px;
    background: linear-gradient(to right, #01a5fe, #0185ff);
    overflow: auto;

    .title {
        font-size: 24px;
        color: white;
        margin: 20px 0 10px 10px;
    }
}

// 轮播图
.my-swipe {
    height: 100px;
    margin: 10px;
    background: #f5f5f5;

    .van-swipe-item {
        img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
    }
}

// 店铺列表
.list {
    margin-bottom: 60px;
    .title {
        font-weight: bold;
        font-size: 20px;
        margin-left: 10px;
    }

    .sort {
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .shoplist {
        margin: 10px;

        .shop {
            display: flex;
            margin: 10px 0;

            .imgbox {
                width: 80px;
                margin-right: 10px;

                img {
                    width: 100%;
                }
            }

            .text {
                font-size: 12px;
                .name{
                    font-weight: bold;
                    margin-bottom: 10px;
                };
                .sale{
                    margin-bottom:5px;
                    span{
                        &:nth-child(1){
                        color:orangered;
                        margin-right: 20px;
                    }
                    }
                };
                .desc{
                    span{
                        float: right;
                        margin-left: 20px;
                    }
                }
            }
        }
    }
}
</style>